<template>
  <div
    style="position: absolute;background-color: #ffffff;
    width: 92%;
    border-radius: 5px;
    height: 95%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;"
  >
    <div style="background-color: rgba(249, 249, 249, 1);width: 100%;height: 60px;border-radius: 5px;"><span
      style="font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: 700;font-style: normal;font-size: 16px;text-align: left;line-height: 20px;position: absolute;margin: 20px;"
    >系统配置</span></div>
    <div
      style="position: absolute;margin: 0 113px;"
    >
      <p><span style="text-decoration:none;color:#409EFF;">▋</span><span style="text-decoration:none;"> 接口地址</span></p>
    </div>
    <div style="margin: auto;top: 0;left: 0;right: 0;bottom: 0;width: 40%;">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" style="margin-top: 150px">
        <el-form-item label-width="140px" label="刻录机IP地址：" prop="burnIp">
          <el-input v-model="formData.burnIp" placeholder="请输入刻录机IP地址" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item label-width="140px" label="刻录机端口：" prop="burnPort">
          <el-input v-model="formData.burnPort" placeholder="请输入刻录机port端口" clearable :style="{width: '100%'}" />
        </el-form-item>
        <!-- <el-form-item label-width="140px" label="获取本地视频地址：" prop="localVideoAddress">
          <el-input v-model="formData.localVideoAddress" placeholder="请输入获取本地视频地址" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item label-width="140px" label="获取上云视频地址：" prop="ossVideoAddress">
          <el-input v-model="formData.ossVideoAddress" placeholder="请输入获取上云视频地址" clearable :style="{width: '100%'}" />
        </el-form-item> -->
        <el-form-item size="large" style="margin-left: 133px;position: absolute;">
          <el-button type="primary" style="width: 100px;margin-right: 77px;margin-top: 64px;" @click="submitForm">保存</el-button>
          <el-button style="width: 100px;" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { list, insert } from '@/api/burnConfig'
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        id: null,
        burnIp: '',
        burnPort: '',
        localVideoAddress: '',
        ossVideoAddress: ''
      },
      rules: {
        burnIp: [{
          required: true,
          message: '请输入刻录机IP地址',
          trigger: 'blur'
        }],
        burnPort: [{
          required: true,
          message: '请输入刻录机prot端口',
          trigger: 'blur'
        }],
        localVideoAddress: [],
        ossVideoAddress: []
      },
      burnConfig: null
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.list()
  },
  methods: {
    list() {
      list().then(response => {
        if (response.data != null) {
          this.formData = response.data
        }
      })
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        insert(this.formData).then(response => {
          if (response.code === 200) {
            this.$message({ message: '保存成功', type: 'success' })
          } else {
            this.$message.error('保存失败')
          }
        })
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    }
  }
}

</script>
<style>
</style>
